<!--
- Author:   .
- Date:    2017/7/4 0004.
- File:    my.
-->
<template>
  <div>
    <div class="Web_Box">
      <!--<div class="Confirmationhints" v-show="memberInfo.is_brush_man == '1'">-->
      <!--<ul class="f-cb">-->
      <!--<li :class="{'on': !needGoods}" @click="switchNeedGoods(false)">-->
      <!--<i class="iconfont icon-xuanze"></i>-->
      <!--<h4>无需寄货</h4>-->
      <!--<p>购买后商家不发货，可返现</p></li>-->
      <!--<li :class="{'on': needGoods}" @click="switchNeedGoods(true)">-->
      <!--<i class="iconfont icon-xuanze"></i>-->
      <!--<h4>需要寄货</h4>-->
      <!--<p>购买后商家发货，不可返现</p>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</div>-->
      <div class="ConfirmationOrder">
        <div class="ConsigneeInfo" v-show="type == 0">
          <div class="add_adree" v-show="addressList.requested && addressList.data.length <= 0" @click="gotoAddAddress">添加收货地址</div>
          <div v-show="addressList.requested && addressList.data.length > 0" @click="selectAddress">
            <p class="text1 f-cb"><span class="name fl">收货人:{{address.true_name}} </span>
              <span class="tel fr">{{address.mob_phone}}</span></p>
            <div class="Address slh2">{{address.area_info}} <span v-show="needGoods">{{address.address}}</span><span v-show="!needGoods">到货后请电话联系</span>
            </div>
            <i class="iconfont icon-rightdot"></i></div>
        </div>
        <div class="ConsigneeInfo" style="background: #fff; margin-bottom: 0.25rem" v-show="type == 1">
          <div class="add_adree" v-show="shopAddressList.requested && shopAddressList.data.length <= 0">当前无线下商店数据，暂不能自提</div>
          <div v-show="shopAddressList.requested && shopAddressList.data.length > 0" @click="selectShopAddress">
            <p class="text1 f-cb">
              <span class="name fl"><span class="cr_f23030 pr5">自提门店</span> {{shopAddress.seller_name}} </span>
              <span class="tel fr">{{shopAddress.telphone}}</span></p>
            <div class="Address slh2">{{shopAddress.area_info}} {{shopAddress.address}}</div>
            <i class="iconfont icon-rightdot"></i></div>
        </div>
        <div class="ShopGoods EditPro hidden bor_b_dcdddd">
          <div class="order_ts" v-show="memberInfo.is_brush_man == '1' && !needGoods">此订单可获得{{integralGet | toFixed(2)}}积分</div>
          <div class="ProList">
            <!--<div class="oeder_tex">订单号:2362356239521521</div>-->
            <ul>
              <li v-for="item in buyInfo.alldata">
                <div class="Pic"><img :src="$config.website + $config.goodsImgSrc + item.goods_image" alt=""/></div>
                <div class="Con">
                  <div class="pl20">
                    <h2 class="">{{item.goods_name}}&nbsp;&nbsp;<span v-for="attr in item.goods_spec">{{attr.name}} </span>
                    </h2>
                    <!--<p class="Attribute"><span v-for="attr in item.goods_spec">{{attr.name}} </span></p>-->
                    <p class="PriceQuantity">
                      <span class="fl cr_f84e37"><span v-show="orderType == '1'">￥</span>{{item.goods_price | discount(item.groupbuy_rebate) | toFixed(0)}}</span><span v-show="orderType == '4'">红积分</span></span><span class="fr cr_282828">×{{item.goods_num}}</span>
                    </p>
                  </div>
                </div>
              </li>
              <li>
                <p style="font-size: 14px">合计:<span class="cr_f84e37"><span v-show="orderType == '1'">￥</span>{{buyInfo.total | toFixed(0)}}<span v-show="orderType == '4'">红积分</span></span>
                </p></li>
            </ul>
          </div>
        </div>
        <div class="OtherInfo">
          <ul>
            <li v-show="false"><!--已不用此功能-->
              <div class="tit">可使用余额支付 </div>
              <div class=" pr50">
                <span class="cr_fd6847 ml10">￥{{balanceUsed | toFixed(2)}}</span>

              </div>
              <i v-show="!useBalance" class="iconfont icon-pitch2" @click="switchUseBalance(true)"></i>
              <i v-show="useBalance" class="iconfont icon-select" @click="switchUseBalance(false)"></i></li>
            <li style="height:55px; line-height:40px;" v-show="false"><!--已不用此功能-->
              <div class="tit">可使用积分抵扣</div>
              <div class=" pr50">
                <span class="cr_fd6847 ml10">￥{{integralUsed | toFixed(2)}}</span>
                <!--<span class="ml10">(总积分:{{buyInfo.integral}})</span>-->
                <p class=" f12 cr_898989 tis ">每次购买最多可使用订单商品总额50%的积分抵扣</p>
              </div>
              <i v-show="!useIntegral" class="iconfont icon-pitch2" @click="switchIntegral(true)"></i>
              <i v-show="useIntegral" class="iconfont icon-select" @click="switchIntegral(false)"></i>

            </li>

            <li v-show="orderType != '4'">
              <div class="tit">配送方式</div>
              <div class="fr pr20 f24 cr_000" v-show="orderType == '1'">包邮</div>
              <!--<div class="fr pr20 f24 cr_000" v-show="orderType == '4'">快递到付</div>-->
            </li>
            <li v-show="orderType == '4'">
              <div class="tit">运费</div>
              <div class="fr pr20 f24 cr_f84e37">{{buyInfo.total_goods_freight}}元</div>
            </li>
            <li class="Total" style=" height:80px;"><textarea placeholder="买家留言" v-model="remark"></textarea></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="BottomGd">
      <span class="totals">需支付:<span class="cr_fd6847" v-show="orderType == '1'"><span>￥</span>{{payed | toFixed(0)}}</span><span class="cr_fd6847" v-show="orderType == '4'"><span>￥</span>{{buyInfo.total_goods_freight}}运费</span></span>
      <button class="but_3 fr bg_45a73a" type="button" @click="submitOrder">提交订单</button>
    </div>
    <!--右侧导航Start-->
    <back-nav></back-nav>
    <!--右侧导航End-->

    <!--弹窗-->

  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import payPop from '../../components/payPop'

  export default{
    mixins: [
      mapModules({addressList: 'addressList', shopAddressList: 'shopAddressList', memberInfo: 'memberInfo'}),
      mapRules({need: ['addressList', 'shopAddressList', 'memberInfo']})
    ],
    data() {
      return {
        orderType: this.$route.query.orderType || '1',
        type: this.$route.query.type || 0, // 0 邮寄 1 自提
        from: '',
//        needGoods: this.$storage.getNeedGoods() || false, // 是否需要寄货(刷手才有此选项)
        buyInfo: {total: 0, integral: 0, balance: 0, alldata: []},
        useIntegral: false,
        useBalance: false,
        remark: '', // 备注
        order: {order_id: '', pay_sn: ''}, // 提交成功后，对其赋值
        selectedCartIdList: [] // 要购买的商品的cartId列表
      }
    },
    computed: {
      needGoods: function () {
        return this.memberInfo.is_brush_man != '1' || this.orderType == '4'
      },
      integralGet: function () {
        return parseFloat(this.buyInfo.total) + parseFloat(this.buyInfo.total * this.memberInfo.a_rate)
      },
      // 抵扣的余额
      balanceUsed () {
        let balanceMony = parseFloat(parseFloat(this.buyInfo.balance).toFixed(2))
        let totalMony = parseFloat(parseFloat(this.buyInfo.total).toFixed(2))
        let remain = totalMony
        if (this.useIntegral) {
          remain = parseFloat((totalMony - this.integralUsed).toFixed(2))
        }
        return balanceMony > remain ? remain : balanceMony
      },
      // 抵扣的积分金额
      integralUsed () {
        let integralMoney = parseInt(this.buyInfo.integral) // 1积分1元
        let halfTotalMoney = parseInt((parseFloat(this.buyInfo.total) / 2).toFixed(2)) // 最多可使用订单总额的50%
        return integralMoney > halfTotalMoney ? halfTotalMoney : integralMoney
      },
      // 抵扣后需支付的金额
      payed () {
        let remain = parseFloat(this.buyInfo.total)
        if (this.useIntegral) {
          remain = remain - this.integralUsed
        }
        if (this.useBalance) {
          remain = remain - this.balanceUsed
        }
        return remain
      },
      address () {
        if (this.$route.query.addressId) {
          for (let i = 0; i < this.addressList.data.length; i++) {
            if (this.addressList.data[i].address_id == this.$route.query.addressId) {
              return this.addressList.data[i] // 使用指定地址
            }
          }
        } else {
          for (let i = 0; i < this.addressList.data.length; i++) {
            if (this.addressList.data[i].is_default === '1') {
              return this.addressList.data[i] // 使用默认地址
            }
          }
          if (this.addressList.data.length > 0) {
            return this.addressList.data[0] // 没有默认地址，使用第一个地址
          }
        }
        return {} // 没有地址
      },
      shopAddress () {
        if (this.$route.query.shopAddressId) {
          for (let i = 0; i < this.shopAddressList.data.length; i++) {
            if (this.shopAddressList.data[i].address_id == this.$route.query.shopAddressId) {
              return this.shopAddressList.data[i] // 使用指定地址
            }
          }
        } else {
          for (let i = 0; i < this.shopAddressList.data.length; i++) {
            if (this.shopAddressList.data[i].is_default === '1') {
              return this.shopAddressList.data[i] // 使用默认地址
            }
          }
          if (this.shopAddressList.data.length > 0) {
            return this.shopAddressList.data[0] // 没有默认地址，使用第一个地址
          }
        }
        return {} // 没有地址
      }
    },
    components: {},
    created() {
//      if (this.from === 'address-list' || this.from === 'address-add') {  // 选择地址页跳回
//        return
//      }
      console.log('query', this.$route.query.cart)
      this.selectedCartIdList = this.$route.query.cart.toString().split(',')
      console.log('cartIdList', this.$route.query, this.selectedCartIdList)
      this.getBuyInfo(this.selectedCartIdList, this.$route.query.addressId)
    },
    watch: {
      $route () {
        this.type = this.$route.query.type
      }
    },
    methods: {
      switchNeedGoods(boolValue) {
        this.needGoods = boolValue
//        this.$storage.setNeedGoods(boolValue)
      },
      switchType(value) {
        this.$router.replace({name: 'order-confirm', query: {cart: this.$route.query.cart, type: value}})
      },
      switchUseBalance(boolValue) {
        this.useBalance = boolValue
      },
      switchIntegral(boolValue) {
        if (this.integralUsed < 0 && !boolValue) { // 积分为负数时，不让用户取消勾选，必须要多付款，抹平积分。
          return
        }
        this.useIntegral = boolValue
      },
      gotoAddAddress() {
        this.$router.push({
          name: 'address-add',
          query: {from: 'order-confirm', cart: this.$route.query.cart, type: this.type, orderType: this.orderType}
        })
      },
      getBuyInfo(idList) {
        this.$request.getBuyInfo(idList).then(data => {
          this.buyInfo = data
        })
      },
      selectAddress() {
        this.$router.push({
          name: 'address-list',
          query: {from: 'order-confirm', cart: this.$route.query.cart, type: this.type, orderType: this.orderType}
        })
      },
      selectShopAddress() {
        this.$router.push({
          name: 'address-shop',
          query: {from: 'order-confirm', cart: this.$route.query.cart, type: this.type, orderType: this.orderType}
        })
      },
      submitOrder() {
        let param = {
          cart_id: this.selectedCartIdList,
          ifcart: 1,
          is_balance: this.useBalance ? 1 : 0,
          is_integral: this.useIntegral ? 1 : 0,
          order_note: this.remark,
          pay_name: 'online',
          self: this.type,
          is_needship: this.needGoods ? 1 : 0
        }
        if (this.type == 0) { // 邮寄
          param.address_id = this.address.address_id
        } else if (this.type == 1) { // 自提
          param.address_id = this.shopAddress.address_id
        }
        if (!param.address_id) {
          this.$toast('请先选择地址')
          return
        }
        this.$indicator.open('处理中...')
        this.$request.submitOrder(param).then(data => {
          this.$indicator.close()
//          this.$toast('提交订单成功')
          this.selectedCartIdList = []
          this.order = data
          // if (parseFloat(parseFloat(this.payed).toFixed(2)) - 0 <= 0) { // 通过帐号余额支付，不需要走第三方支付
          //   this.$router.replace({name: 'order-success', query: {id: this.order.order_id}})
          //   return
          // }
          let paySn = this.order.pay_sn
          payPop({paySn: paySn, orderId: this.order.order_id, orderType: this.orderType}, this.canclePay)
        }).catch(e => {
          this.$indicator.close()
          this.$toast('订单提交失败:' + e.msg)
        })
      },
      canclePay() {
        this.$router.replace({name: 'order-detail', params: {id: this.order.order_id}, query: {orderType: this.orderType}})
      }
    }
  }
</script>

<style>

</style>
